import React from 'react'
import { useEffect } from 'react'
import * as echarts from 'echarts';
type Props = {
    w?: string,
    h?: string,
    id: string,
    isShowToolTip: boolean
}

export default function Appchartbar({ w, h, id, isShowToolTip }: Props) {
    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id)!);
        var data = [5, 20, 36, 10, 10, 20];
        window.addEventListener('resize', function () {
            myChart.resize();
        });

        let option: any = {
            title: { // 标题
                text: '学生成绩',
                left: 'left',
                subtext: 'vue考试',
                textStyle: {
                    color: 'red',
                    fontSize: 16
                }
            },
            // tooltip: { // 提示框
            //     // formatter: `{b}{a}:<br />{c}}`
            //     // formatter: (params: any): any => {
            //     //     console.log('params', params)
            //     //     let value = params.value
            //     //     let total = data.reduce((sum, item) => item += sum, 0)
            //     //     // console.log(params.value)
            //     //     // console.log('total', total);
            //     //     let result = parseInt(String(value / total * 100)) + '%';
            //     //     //  console.log('result', result);
            //     //     return `${params.name}${params.seriesName}占比:<br/>${result}`
            //     // }
            // },
            xAxis: { // x轴
                data: ['祝芹', '张纯', '薛佳泽']
            },
            yAxis: {},// y轴
            legend: {  // 图例
                // data: [
                //     {
                //         name: '理论成绩',
                //         // 强制设置图形为圆。
                //         icon: 'circle',
                //         // 设置文本为红色
                //         // textStyle: {
                //         //     color: 'red'
                //         // }
                //     },
                //     {
                //         name: '技能成绩',
                //         // 强制设置图形为圆。
                //         icon: 'circle',
                //         // 设置文本为红色
                //         // textStyle: {
                //         //     color: 'red'
                //         // }
                //     }
                // ]
                data: ['理论成绩', '技能成绩']
            },
            toolbox: { // 工具箱
                feature: {
                    saveAsImage: {},
                    restore: {},
                    dataView: {},
                    dataZoom: {},
                    magicType: {
                        type: ['line', 'bar', 'stack']
                    }

                }
            },
            series: [ // 系列数据
                {
                    name: '理论成绩',
                    type: 'bar',
                    data: [60, 70, 90]
                },
                {
                    name: '技能成绩',
                    type: 'line',
                    data: [{
                        name: '技能',
                        symbol: 'circle',
                        value: 80,
                    },
                    {
                        name: '技能',
                        symbol: 'circle',
                        value: 40,
                    }, {
                        name: '技能',
                        symbol: 'circle',
                        value: 75,
                    }]
                }
            ]
        };

        //判断是否需要显示tooltip
        // isShowToolTip ? option.tooltip = {} : null
        if (isShowToolTip) {
            option.tooltip = {}
        }
        myChart.setOption(option);
    }, [])
    return (
        <div id={id} style={{
            width: w ? w : '500px',
            height: h ? h : '500px',
            padding: '10px'
        }}>

        </div>
    )
}